<template>
  <div>
    <common-head title="购物车"></common-head>
    <div class="wrap">
      <div v-if="!items.length">购物车空空如也</div>
      <van-swipe-cell
        v-for="(item,index) in items"
        :key="item.id"

      >
        <div class="item-card">
          <van-checkbox
            v-model="item.isChecked"
            @click="itemCheckChange"
            ></van-checkbox>
          <van-card
            :num="item.num"
            :price="item.minPrice"
            :title="item.name"
            :thumb="item.pic"
             class="goods-card"
          >
            <template #footer>
              <van-stepper
                @change="itemNumChange"
                v-model="item.num"></van-stepper>
            </template>
          </van-card>
        </div>
        <template #right>
          <van-button
            @click="del_item(index)"
            square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 底部提交订单 -->
    <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="isAllChecked">全选</van-checkbox>
    </van-submit-bar>
    <my-tabbar/>
  </div>
</template>

<script>
import MyTabbar from 'components/MyTabbar'
import CommonHead from'components/CommonHead'
import { mapState, mapMutations } from 'vuex'
import { Dialog, Toast } from 'vant'
import { checkLogin } from 'utils'
export default {
  data () {
    return {
      msg: 12
    }
  },
  created() {
    // 初始化计算总价格
    this.calcTotal()
  },
  methods: {
    del_item (index) {
      // 删除商品
      Dialog.confirm({
        title: '删除',
        message: '您确认删除吗？',
      })
        .then(() => {
          // on confirm
          // 删除商品
          this.delItem(index)
          this.calcTotal()
          const allChecked = this.items.every(item=>item.isChecked)
          this.setAllChecked(allChecked)

        })

    },
    itemCheckChange () {
      // 点击选中商品以及取消选中
      this.setItems(this.items)
      this.calcTotal()
      // 处理全选状态
      const allChecked = this.items.every(item=>item.isChecked)
      console.log(allChecked,'点击商品选中状态')
      this.setAllChecked(allChecked)
    },
    itemNumChange () {
      // 商品数量自动变
      // 改变vuex中购物车的 数量
      this.setItems(this.items)
      this.calcTotal()
    },
    onSubmit () {
      if(!checkLogin()){
        this.$router.push({
          path: '/login',
          query: {
            from: '/cart'
          }
        })
      }
      if (this.items.length){
        // 说明登录
        // 生成订单数据
        const orderItems =  this.items.filter(item=>item.isChecked);
        if(!orderItems.length){
          // 说明没有选中任何商品
          Toast('请选中至少一个商品提交订单')
          return
        }
        // 订单数据
        const order = {
          order: Date.now(),
          status: 0,
          items:orderItems,
          total: this.total
        }
        this.setNowOrder(order)
        this.$router.push('/order')
      }else{
        Toast("购物车没有商品，请前往添加")
      }


    },
    ...mapMutations('cart', ['calcTotal', 'setItems', 'setAllChecked', 'delItem', 'setSingleCheck']),
    ...mapMutations('order', ['setNowOrder'])
  },
  computed: {
    ...mapState({
      items: (state) => state.cart.items,
      total: (state) => state.cart.total
    }),
    isAllChecked: {
      get(){
         return this.$store.state.cart.isAllChecked
      },
      set(value){
       // 点击全选会触发
       this.setAllChecked(value)
       this.setSingleCheck(value)
      }
    }
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>

  .wrap{
    padding-bottom: 100px;
  }
  .delete-button {
    height: 100%;
  }
  .van-card__bottom{
    position: relative;
    top: -25px;
  }
  .item-card{
    display: flex;
    align-items: center;
    .van-checkbox{
      margin: 0 5px;
    }
    .goods-card {
      margin: 0;
      background-color: #fff;
      flex: 1;
     }
  }
  .van-submit-bar{
    bottom:50px;
  }
</style>
